<template>
  <div class='bordersdiv' >
    <div v-for="item in borders" style="padding: 10px;">
      <el-card shadow="hover" :body-style="{width: '300px' }">
        <div slot="header">
          <span><!-- card title --></span>
          sdfsdf
        </div>
        <!-- card body -->
        <img src="" alt="">sdfsdf
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  name: 'borders',
  components: {
    
  },
  data() {
    return {
      borders: [
        {
          name: '空边框',
        },
        {
          name: '带标题边框',
        },
        {
          name: '背景边框',
        },
        {
          name: '背景边框',
        },
        {
          name: '背景边框',
        },
        {
          name: '背景边框',
        },
      ]
    };
  },
  computed: {
    
  },
  watch: {
    
  },
  mounted() {
    
  },
  methods: {
    
  },
}
</script>
<style lang='scss' scoped>
.bordersdiv{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>